<template>
    <div class="login-box">
        <n-form ref="loginFormRef" :show-label="false" :rules="rules" :model="loginForm">
            <n-form-item path="code">
                <n-input v-model:value="loginForm.code" round placeholder="请输入登陆码" @keydown.enter="handleToLogin" />
            </n-form-item>
            <n-form-item>
                <n-button round type="primary" @click="handleToLogin">登陆</n-button>
            </n-form-item>
        </n-form>
    </div>
</template>
    
<script lang="ts" setup>
import { login } from '@/api/login'
import { FormInst } from 'naive-ui'
import { useRouter } from 'vue-router';
const router = useRouter();
const loginFormRef = ref<FormInst | null>(null)
const loginForm = ref({
    code: ''
})
const rules = reactive({
    code: {
        required: true,
        message: '请输入登陆码',
        trigger: ['input', 'blur']
    }
})

const handleToLogin = () => {
    loginFormRef.value?.validate(async (errors) => {
        try {
            if (!errors) {
                const { data } = await login({ code: loginForm.value.code })
                localStorage.setItem('chatbotToken', data)
                router.push('/')
            }
        } catch (error) {
            console.log(error)
        }
    })
}
</script>
<style scoped lang="scss">
.login-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    h2 {
        text-align: center;
    }

    button {
        width: 100%;
    }
}
</style>
    